<template>
	<jf-navigation>
		<view>{{$t('index.info.complaint.navigation')}}</view>
		<template #right>
			<view class="add_topic_btn" @click="submit()">{{$t('common.submit.confirm')}}</view>
		</template>
	</jf-navigation>
	<view class="complaint_select border" @click="openType()">
		<view class="complaint_select_label">{{$t('index.info.complaint.type')}}</view>
		<input type="text" :placeholder="$t('index.info.complaint.typePlaceholder')" disabled v-model="data.type" class="complaint_select_input"/>
		<image src="@/static/images/index/icon014.png" class="complaint_select_arrow"></image>
	</view>
	<view class="complaint_select">
		<view class="complaint_select_label">{{$t('index.info.complaint.content')}}</view>
	</view>
	<textarea v-model="form.content" class="complaint_textarea" :placeholder="$t('index.info.complaint.contentPlaceholder')" maxlength="500" :disabled="data.loading"></textarea>
	<view class="complaint_textarea_length">{{form.content.length}}/500</view>
	<view class="complaint_upload">
		<zq-upload-ts
			:action="data.uploadUrl"
			v-model:files="data.files"
			:header="data.header"
			:uploaded="uploadImg"
			:count="9"
			:addImageText="$t('index.add.imagePlaceholder')"
			:removeModel="false"
			:disabled="data.loading"
			:columnCount="4">
		</zq-upload-ts>
	</view>
	
	<jf-picker v-model:show="data.showType" v-model="form.type_id" v-model:label="data.type" :range="data.types" :title="$t('index.info.complaint.type')"></jf-picker>
</template>

<script lang="ts" setup>
	import { onMounted, reactive, getCurrentInstance } from "vue"
	import enviroment from "@/static/network/enviroment"
	import { getComplaintType } from "@/api/common"
	import { complaint } from "@/api/article"
	import Route from "@/static/utils/Route"
	import { onLoad } from "@dcloudio/uni-app"
	
	const route = new Route()
	const { proxy } = getCurrentInstance()
	const data = reactive({
		loading: false,
		showType: false,
		type: "",
		types: [],
		files: [],
		uploadUrl: enviroment.getUploadImageUrl(),
		header: enviroment.getGetHeader()
	})
	const form = reactive({
		pid: undefined,
		type_id: undefined,
		content: "",
		image: undefined
	})
	
	const openType = () => {
		if(data.loading) return
		data.showType = true
	}
	const uploadImg = (file:any, respones:any):void => {
		if(respones.status === 200){
			file.status = 'success'
		}else{
			file.status = 'fail'
		}
		file.url = respones.data.url
		return file
	}
	const submit = ():void => {
		if(!form.type_id){
			uni.showToast({
				title: proxy.$t("index.info.complaint.typePlaceholder"),
				icon: "none"
			})
		}else if(!form.content){
			uni.showToast({
				title: proxy.$t("index.info.complaint.contentPlaceholder"),
				icon: "none"
			})
		}else{
			data.loading = true
			form.image = data.files.map(item => item.url).join("|")
			complaint(form).then(()=>{
				route.back({
					delay: 1000,
					message: proxy.$t('common.submit.success')
				})
			}).catch(() => {
				data.loading = false
				uni.showToast({
					title: proxy.$t('common.submit.fail'),
					icon: "none"
				})
			})
		}
	}
	
	onMounted(() => {
		getComplaintType().then((res:any):void =>{
			data.types = res.data.list.map((item) => {
				return {
					value: item.id,
					label: item.title
				}
			})
		})
	})
	onLoad((options) => {
		form.pid = Number(options.pid)
	})
</script>

<style lang="scss">
	.add_topic_btn{
		line-height: 64rpx;
		padding: 0 26rpx;
		border-radius: 32rpx;
		background: var(--background);
		font-weight: 500;
		color: #FFFFFF;
		font-size: 28rpx;
	}
	.complaint_select{
		@include layout();
		width: 750rpx;
		height: 100rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		&.border{
			border-bottom: 2rpx solid #F2F4F6;
		}
		.complaint_select_label{
			font-weight: 400;
			line-height: 40rpx;
			font-size: 28rpx;
		}
		.complaint_select_input{
			flex-grow: 1;
			margin: 0 32rpx;
			line-height: 40rpx;
			font-size: 28rpx;
		}
		.complaint_select_arrow{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.complaint_textarea{
		width: 750rpx;
		height: 220rpx;
		padding: 0 32rpx 32rpx 32rpx;
		box-sizing: border-box;
		font-weight: 400;
		line-height: 40rpx;
		font-size: 28rpx;
	}
	.complaint_textarea_length{
		width: 750rpx;
		padding-right: 32rpx;
		box-sizing: border-box;
		line-height: 100rpx;
		color: #B2B9C6;
		font-size: 20rpx;
		text-align: right;
	}
	.complaint_upload{
		width: 750rpx;
		padding: 0 32rpx;
	}
</style>